<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>仿京东侧边购物车</title>
<script type="text/javascript" src = 'js/jquery.js'></script>
<link rel="stylesheet" href="css/copy.css" type="text/css">
<script type="text/javascript">
$(function(){
$(window).load(function(){

document.ondragstart = document.onselectstart = function(){return false;};//去掉双击蓝色

/**右侧购物车**/
$('.copy-1 li').mouseenter(function(){
			
			var num=$('.copy-1 li').index($(this));
			$('.copy-1 li b').eq(num).animate({right:30,opacity:1},300);	
			
		})
		
		
		$('.copy-1 li').mouseleave(function(){
			$('.copy-1 li b').stop(true).animate({right:0,opacity:0},300)
		})
		
		
		
		$('.shop').click(function(){
		
		if(parseInt($('.copy').css('right'))==295){
		
			$('.copy,.copyy').stop(true).animate({'right':0});
			$('.shopping').animate({right:-295})
		}else if(parseInt($('.copy').css('right'))==0){
			
			$('.copy,.copyy').animate({right:295});
			$('.shopping').animate({right:0})
		}
		
		
		})
		
		/**左侧楼层**/
		// @ 给窗口加滚动条事件
		$(window).scroll(function(){
			// 获得窗口滚动上去的距离
			var ling = $(document).scrollTop();
			// 在标题栏显示滚动的距离
			
			// 如果滚动距离大于1534的时候让滚动框出来
			if(ling>1534){
				$('#box').show();
			}
			if(1534<ling && ling<2300){
				// 让第一层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏
				$('#box ul li').eq(0).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(0).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<3020){
				$('#box ul li').eq(1).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(1).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<3595){
				$('#box ul li').eq(2).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(2).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<4170){
				$('#box ul li').eq(3).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(3).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<4885){
				$('#box ul li').eq(4).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(4).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<5460){
				$('#box ul li').eq(5).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(5).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<6035){
				$('#box ul li').eq(6).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(6).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<6645){
				$('#box ul li').eq(7).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(7).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<7360){
				$('#box ul li').eq(8).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(8).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<7905){
				$('#box ul li').eq(9).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(9).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<8790){
				$('#box ul li').eq(10).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(10).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}else if(ling<9300){
				$('#box ul li').eq(11).find('.num').hide().siblings('.word').css('display','block');
				$('#box ul li').eq(11).siblings('li').find('.num').css('display','block').siblings('.word').hide();
			}
			if(ling>9400 || ling<1534){
				// $('#box').css('display','none');  // @ 这一句和下一句效果一样。
				$('#box').hide();
			}
			
		})
		
		$('#box ul li').hover(function(){
			$(this).find('.num').hide().siblings('.word').css({'display':'block','background':'#CB1C39','color':'white'});
		},function(){
		
			$(this).find('.num').css({'display':'block','background':'white','color':'#666'}).siblings('.word').hide().css({'display':'none','background':'','color':''});
		})
		
		$('#box ul li').eq(0).click(function(){
		$('html,body').animate({scrollTop:1600}, 500);
		})
		$('#box ul li').eq(1).click(function(){
		$('html,body').animate({scrollTop:2400}, 500);
		})
		$('#box ul li').eq(2).click(function(){
		$('html,body').animate({scrollTop:3100}, 500);
		})
		$('#box ul li').eq(3).click(function(){
		$('html,body').animate({scrollTop:3700}, 500);
		})
		$('#box ul li').eq(4).click(function(){
		$('html,body').animate({scrollTop:4300}, 500);
		})
		$('#box ul li').eq(5).click(function(){
		$('html,body').animate({scrollTop:5000}, 500);
		})
		$('#box ul li').eq(6).click(function(){
		$('html,body').animate({scrollTop:5700}, 500);
		})
		$('#box ul li').eq(7).click(function(){
		$('html,body').animate({scrollTop:6300}, 500);
		})
		$('#box ul li').eq(8).click(function(){
		$('html,body').animate({scrollTop:6900}, 500);
		})
		$('#box ul li').eq(9).click(function(){
		$('html,body').animate({scrollTop:7600}, 500);
		})
		$('#box ul li').eq(10).click(function(){
		$('html,body').animate({scrollTop:8200}, 500);
		})
		$('#box ul li').eq(11).click(function(){
		$('html,body').animate({scrollTop:8900}, 500);
		})
		$('.top1').click(function(){
		$('html,body').animate({scrollTop:0}, 500);
		})
		
		/**顶部悬浮**/
		var fixSch = $('.fixed_box');
        $(window).bind('scroll', function () {
            var sTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (sTop > 600) {
                fixSch.css({ top: 0 })

            } else {
                fixSch.css({ top: -100})

            }
        })
		
		
		var iIndex=-1;
		$('.fixed_text').keydown(function(){
			$('#fixed_text1').css('display','none')
		}).bind('input propertychange',function(){
			var value=$(this).val();
			if(value){
				$.ajax({
					url:'https://suggest.taobao.com/sug?code=utf-8',
					data:{q:value},
					jsonp:'callback',
					//callback:'',
					dataType:'jsonp',
					success:function(data){
						var html='';
						var arr=data.result;//接口处的商品信息和数量的总名称
						//arr[i][0]是商品信息，arr[i][1]是商品数量，使用索引区分
						
						for(var i=0;i<arr.length;i++){
							html+='<li data-key='+arr[i][0]+'><a href="javascript:;">'+arr[i][0]+'<span>约有'+arr[i][1]+'件</span></a></li>'
						}
						if(html){
							$('.jax').css('display','block').html(html)
						}else{
							$('.jax').css('display','none')
						}
						
					}
				})
			}else{
				$('.jax').css('display','none');
				$('#fixed_text1').css('display','block')
			}
		}).keyup(function(e){
			var 
				evt=e||event
				aLi=$('.jax li');
			if(evt.keyCode==38||evt.keyCode==40){
				if(evt.keyCode==38){
					iIndex--;
					if(iIndex<0){
						iIndex=aLi.length-1
					}
				}else if(evt.keyCode==40){
					iIndex++;
					if(iIndex>aLi.length-1){
						iIndex=0
					}
				}
				$('.fixed_text').val(aLi.removeClass('active').eq(iIndex).addClass('active').data('key'));
			}
			
		})
		
		
})

})
</script>
</head>
<body>


<div class="right">
<div class="copy">
<ul class="copy-1">
<li><b>京东会员</b><i class="iconfont">&#xf0006;</i></li>
<li><b>购物车</b><i class="iconfont shop">&#xf003f;</i></li>
<li><b>我的关注</b><i class="iconfont">&#xf0054;</i></li>
<li><b>我的足迹</b><i class="iconfont">&#xe63a;</i></li>
<li><b>我的消息</b><i class="iconfont">&#xf0191;</i></li>
<li><b>咨询JIMI</b><i class="iconfont">&#xf00f9;</i></li>
</ul>

</div>
<div class="copyy">
<ul class=" copy-1">
<li><b>置顶</b><i class="iconfont top1">&#xe6f7;</i></li>
<li><b>反馈</b><i class="iconfont">&#xe609;</i></li>
</ul>
</div>
<div class="shopping">
<div class="cont1">
				<span class="cont1-left">购物车</span>
				<span class="cont1-right">X</span>
			</div>
			<div class="cont2">
				<span>还没有登录，登录后商品将被保存</span><a href="javascript:;">登录</a>
			</div>
			<div class="cont3">
				<span>商品空空的，赶快去挑选心仪的商品吧~</span>
				<b>去首页看看</b>			
			</div>
			<div class="cont4">
				<div>
					<b>0 </b><span>件商品</span><br>
					<span>共计:</span><b>￥0.00</b>
				</div>
				<a href="javascript:;">去购物车结算</a>
			</div>
</div>
</div>


<div id="box">
	<ul>
		<li>
			<a class="num" href="javascript:;" style="display:none">1F</a>
			<a class="word" href="javascript:;" style="display:block">服装</a>
		</li>
		<li>
			<a class="num" href="javascript:;">2F</a>
			<a class="word" href="javascript:;">美妆</a>
			</li>
		<li>
			<a class="num" href="javascript:;">3F</a>
			<a class="word" href="javascript:;">手机</a>
		</li>
		<li>
			<a class="num" href="javascript:;">4F</a>
			<a class="word" href="javascript:;">家电</a>
			</li>
		<li>
			<a class="num" href="javascript:;">5F</a>
			<a class="word" href="javascript:;">数码</a>
		</li>
		<li>
			<a class="num" href="javascript:;">6F</a>
			<a class="word" href="javascript:;">运动</a>
			</li>
		<li>
			<a class="num" href="javascript:;">7F</a>
			<a class="word" href="javascript:;">居家</a>
		</li>
				<li>
			<a class="num" href="javascript:;">8F</a>
			<a class="word" href="javascript:;">母婴</a>
		</li>
		<li>
			<a class="num" href="javascript:;">9F</a>
			<a class="word" href="javascript:;">食品</a>
		</li>
		<li>
			<a class="num" href="javascript:;">10F</a>
			<a class="word" href="javascript:;">图书</a>
		</li>
		<li class="last">
			<a class="num" href="javascript:;">11F</a>
			<a class="word" href="javascript:;">服务</a>
		</li>
		<li class="last">
			<a class="num" href="javascript:;">12F</a>
			<a class="word" href="javascript:;">生活</a>
		</li>
	</ul>
</div>

<!--悬浮搜索框-->
		
							<div style="top: -100px;" class="fixed_box">
	    <div class="mid">
	        <a href="#" class="fixed_logo">
	            <img src="img/pic.jpg" alt=""/>
	        </a> 
	    </div>
	        <div class="fixedInput_box">
	            <input type="text" class="fixed_text" id="fixed-text1" placeholder="请输入您要搜索的商品"/>
	            <input type="button" class="fixed_btn" value="搜索" / >
				<ul class="jax"></ul>
		
	
	    </div>
	    
	</div>

<div class="back"><img src="img/jd.jpg"/></div>


</body>
</html>